<template>
  <div>
    <el-carousel height="240px">
      <el-carousel-item v-for="(item, index) in imgList" :key="index">
        <img :src="item.img" class="imgStyle" />
      </el-carousel-item>
    </el-carousel>

    <br />
    <div class="container">
      <div class="content">
        <el-row justify="center" class="search-wrap">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
            <div class="top-wrap">
              <el-input
                clearable
                suffix-icon="el-icon-search"
                v-model="searchName"
              ></el-input>
              <el-button type="primary" class="btn-margin" @click="handleSearch"
                >搜索</el-button
              >
            </div>
          </el-col>
        </el-row>

        <br />
        <div class="content-bottom">
          <div class="header-title">项目信息概览</div>
          <el-divider></el-divider>
          <el-card>
            <el-row>
              <el-col :span="12">
                <div class="title-card-title">项目数量统计</div>
                <ul class="title-card-projectNum">
                  <li v-for="(item, index) in projectNumList" :key="index">
                    <div class="item">
                      <div class="item-top">{{ item.value }}</div>
                      <div class="item-bottom">{{ item.key }}</div>
                    </div>
                  </li>
                </ul>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="10">
                <div class="title-card-title">其他信息统计</div>
                <ul class="title-card-projectNum-other">
                  <li v-for="(item, index) in otherProjectNumList" :key="index">
                    <div class="item">
                      <div class="item-top">{{ item.value }}</div>
                      <div class="item-bottom">{{ item.key }}</div>
                    </div>
                  </li>
                </ul>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <RePieRadius
                  :echartData="echartData.proStageCount"
                ></RePieRadius>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="10">
                <RePieRadius :echartData="echartData.proStageCount">
                  项目类型统计
                </RePieRadius>
              </el-col>
            </el-row>
          </el-card>
          <br />
          <!-- </el-col> -->

          <!-- <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="8"
              style="margin-bottom: 20px"
            > -->
          <el-card>
            <div>
              <div class="title-card-title">研发费用统计</div>
              <ul class="title-card-developNum">
                <li v-for="(item, index) in developNumList" :key="index">
                  <div class="item">
                    <div class="item-top">{{ item.value }}</div>
                    <div class="item-bottom">{{ item.key }}</div>
                  </div>
                </li>
              </ul>
            </div>
            <ReBarDevelop>经费支出比例</ReBarDevelop>
          </el-card>
          <br />

          <!-- </el-col> -->

          <!-- <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="8"
              style="margin-bottom: 20px"
            > -->
          <el-card>
            <div>
              <div class="title-card-title">其他信息统计</div>
              <ul class="title-card-otherNum">
                <li v-for="(item, index) in otherNumList" :key="index">
                  <div class="item">
                    <div class="item-top">{{ item.value }}</div>
                    <div class="item-bottom">{{ item.key }}</div>
                  </div>
                </li>
              </ul>
            </div>
            <RePieOther :echartData="echartData.proTypeCount"
              >项目类型统计</RePieOther
            >
          </el-card>
          <!-- </el-col> -->
          <!-- </el-row> -->

          <br />
          <!--
          <div class="header-title">科研成果情况</div>
          <el-divider></el-divider>

          <div>
            <ul class="title-card">
              <li v-for="(item, index) in dataList" :key="index">
                <div class="item">
                  <div class="item-top">{{ item.value }}</div>
                  <div class="item-bottom">{{ item.key }}</div>
                </div>
              </li>
            </ul>
          </div> -->

          <br />
          <!-- <el-row :gutter="20">
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="12"
              style="margin-bottom: 20px"
            >
              <el-card>
                <RePie>各单位项目科研成果</RePie>
              </el-card>
            </el-col>

            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="12"
              style="margin-bottom: 20px"
            >
              <el-card>
                <ReBar>各单位各类型科研成果</ReBar>
              </el-card>
            </el-col>
          </el-row> -->
        </div>

        <br />
      </div>
      <div class="aside">
        <HomeSide />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import {
  // RePie,
  // ReBar,
  RePieRadius,
  RePieOther,
  ReBarDevelop
} from "/@/components/ReCharts/index";
import { postProjectDataInfo, postProjectDataKyInfo } from "/@/api/project";

import HomeSide from "/@/views/components/HomeSide.vue";
import img1 from "/@/assets/u15.png";

const router = useRouter();

const imgList = [{ img: img1 }];

let searchName = ref<string>("");

const handleSearch = (): void => {
  router.push({ name: "search", params: { name: searchName.value } });
};

// const dataList = [
//   { key: "科研成果总数", value: 330 },
//   { key: "专利", value: 110 },
//   { key: "论文", value: 24 },
//   { key: "技术/设备", value: 24 },
//   { key: "论著", value: 22 },
//   { key: "其他", value: 225 }
// ];

const projectNumList = [
  { key: "可研", value: 20 },
  { key: "立项", value: 30 },
  { key: "实施", value: 50 },
  { key: "验收", value: 50 },
  { key: "后评价", value: 50 }
];
const otherProjectNumList = [
  { key: "科研人员", value: 50 },
  { key: "学术交流数量", value: 100 }
];

const developNumList = [
  { key: "预算总经费(万元)", value: "20,000,00.00" },
  { key: "实际总经费", value: "18,000,00.00" }
];

const otherNumList = [
  { key: "科研人员", value: "" },
  { key: "验收项目达标率", value: "" },
  { key: "学术交流数量", value: "" }
];

let echartData = reactive({
  proStageCount: [],
  proTypeCount: []
});

const initGetData = async () => {
  const { code, data } = await postProjectDataInfo({});
  if (code === 200) {
    echartData.proStageCount = data.proStageCount;
    echartData.proTypeCount = data.proTypeCount;
    //其他信息统计
    otherNumList[0].value = data.sciAndComm.kyTotal;
    otherNumList[1].value = "0"; //TODO
    otherNumList[2].value = data.sciAndComm.tcTotal;
    // 项目数据统计
    projectNumList[0].value = data.proStageCount.filter(item => {
      return item.stageStatus === "2";
    })[0].stageTotal;
    projectNumList[1].value = data.proStageCount.filter(item => {
      return item.stageStatus === "3";
    })[0].stageTotal;
    projectNumList[2].value = data.proStageCount.filter(item => {
      return item.stageStatus === "4";
    })[0].stageTotal;
  }
};

const initGetDataky = async () => {
  const { code, data } = await postProjectDataKyInfo({});
  if (code === 200) {
    console.log(data);
    // echartData.proStageCount = data.proStageCount;
    // echartData.proTypeCount = data.proTypeCount;
    // //其他信息统计
    // otherNumList[0].value = data.sciAndComm.kyTotal;
    // otherNumList[1].value = "0"; //TODO
    // otherNumList[2].value = data.sciAndComm.tcTotal;
    // // 项目数据统计
    // projectNumList[0].value = data.proStageCount.filter(item => {
    //   return item.stageStatus === "2";
    // })[0].stageTotal;
    // projectNumList[1].value = data.proStageCount.filter(item => {
    //   return item.stageStatus === "3";
    // })[0].stageTotal;
    // projectNumList[2].value = data.proStageCount.filter(item => {
    //   return item.stageStatus === "4";
    // })[0].stageTotal;
  }
};

initGetData();
initGetDataky();
</script>

<style lang="scss" scoped>
.imgStyle {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  background: #eaeef3;
  // padding-right: 300px;
  // position: relative;
  // overflow-x: hidden;

  .content {
    flex: 1;

    width: 100%;
    height: 100%;
    overflow-x: hidden;
    .search-wrap {
      background: #fff;
      width: 100%;
      height: 50px;
      padding-top: 10px;
      .top-wrap {
        display: flex;
        justify-content: center;
        align-items: center;

        .btn-margin {
          margin-left: 10px;
        }
      }
    }
    &-bottom {
      padding: 16px;
      width: 100%;
    }
  }
  .aside {
    width: 300px;
    min-height: 1000px;
    background: #fff;
    padding: 16px;
    // position: absolute;
    // right: 0;
    // top: 0;
  }
}

.header-title {
  font-size: 20px;
}

.el-divider--horizontal {
  margin: 10px 0;
}

.title-card-title {
  color: $defaultColor;
  padding-bottom: 10px;
}

.basic_li {
  li {
    .item {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      background: #cbdcff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #0c045d;
      .item-top {
        text-align: center;
        font-size: 16px;
      }
      .item-bottom {
        text-align: center;
        font-size: 14px;
      }
    }
  }
}

.title-card-projectNum {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1;
  gap: 10px;
  width: 100%;
  height: 60px;
  @extend .basic_li;
}
.title-card-projectNum-other {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1;
  gap: 10px;
  width: 100%;
  height: 60px;
  @extend .basic_li;
}

.title-card-developNum {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1;
  gap: 10px;
  width: 100%;
  height: 60px;
  @extend .basic_li;
}

.title-card-otherNum {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1;
  gap: 10px;
  width: 100%;
  height: 60px;
  @extend .basic_li;
}
.title-card {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1;
  gap: 10px;
  width: 100%;
  height: 100px;
  @extend .basic_li;
}
</style>
